<template>
  <div class="container">
    <!-- <h2>设备网络配置</h2> -->

    <fieldset class="card">
      <legend>网卡配置</legend>
      <div class="row">
        <div class="fontTitle">可搬移式2.4米快速跟踪天线-访问控制地址：</div>
        <el-form
          :model="antennaForm"
          ref="antennaForm"
          :rules="antennaRules"
          :inline="true"
          size="mini"
        >
          <el-form-item prop="anteDeviceIP" label="天线设备IP">
            <el-input v-model="antennaForm.anteDeviceIP"></el-input>
          </el-form-item>
          <el-form-item prop="anteDevicePort" label="天线设备端口">
            <el-input v-model="antennaForm.anteDevicePort"></el-input>
          </el-form-item>
        </el-form>

        <div class="btn" @click="setting('antennaForm', 3)">配置</div>
      </div>

      <div class="row">
        <div class="fontTitle">宽带采集设备-访问控制地址：</div>
        <el-form
          :model="collectDeviceForm"
          ref="collectDeviceForm"
          :rules="collectDeviceRules"
          :inline="true"
          size="mini"
        >
          <el-form-item prop="collectDeviceIP" label="宽带采集设备IP">
            <el-input v-model="collectDeviceForm.collectDeviceIP"></el-input>
          </el-form-item>
          <el-form-item
            prop="collectDeviceDataPort"
            label="宽带采集设备数据端口"
          >
            <el-input
              v-model="collectDeviceForm.collectDeviceDataPort"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="collectDeviceCmdPort"
            style="margin-left: 20px"
            label="宽带采集设备指令控制端口"
            label-width="200px"
          >
            <el-input
              v-model="collectDeviceForm.collectDeviceCmdPort"
            ></el-input>
          </el-form-item>
        </el-form>

        <div class="btn" @click="setting('collectDeviceForm', 1)">配置</div>
      </div>

      <div class="row">
        <div class="fontTitle">高速DVB信号解调器-访问控制地址：</div>
        <el-form
          :model="dvbDeviceform"
          ref="dvbDeviceform"
          :rules="dvbDeviceRules"
          :inline="true"
          size="mini"
        >
          <el-form-item prop="dvbDeviceIP" label="DVB设备IP">
            <el-input v-model="dvbDeviceform.dvbDeviceIP"></el-input>
          </el-form-item>
          <!-- <el-form-item label="DVB设备数据端口">
            <el-input v-model="dvbDeviceform.dvBDevicePort"></el-input>
          </el-form-item> -->
        </el-form>

        <div class="btn" @click="setting('dvbDeviceform', 2)">配置</div>
      </div>

      <div class="row" v-if="false">
        <el-form
          :model="romoteForm"
          ref="romoteForm"
          :rules="romoteRules"
          :inline="true"
          size="mini"
        >
          <el-form-item prop="collectDeskURL" label="宽带采集远程桌面URL">
            <el-input v-model="romoteForm.collectDeskURL"></el-input>
          </el-form-item>
        </el-form>

        <!-- 生成并下载RDP文件 -->
        <!-- <el-button type="primary" size="mini" @click="generateRdpFile"
          >生成远程访问脚本</el-button
        > -->

        <div class="btn" @click="setting('romoteForm', 4)">配置</div>
      </div>
    </fieldset>
  </div>
</template>

<script>
import { netConfigAPI, netGetAPI } from '@/api/index'
export default {
  name: 'DeviceNnetworkConfiguration',
  data () {
    return {
      antennaForm: {
        anteDeviceIP: '',
        anteDevicePort: ''
      },
      antennaRules: {
        anteDeviceIP: [
          { required: true, message: '请输入天线设备IP', trigger: 'blur' },
          {
            pattern:
              /^(((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/,
            message: '请输入正确的ip地址',
            trigger: 'blur'
          }
        ],
        anteDevicePort: [
          { required: true, message: '请输入天线设备端口', trigger: 'blur' },
          {
            pattern:
              /^((\d)|([1-9]\d{1,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d{1})|(6553[0-5]))$/,
            message: '端口号范围为0~65535',
            trigger: 'blur'
          }
        ]
      },

      collectDeviceForm: {
        collectDeviceIP: '',
        collectDeviceCmdPort: '',
        collectDeviceDataPort: ''
      },
      collectDeviceRules: {
        collectDeviceIP: [
          { required: true, message: '请输入宽带采集设备IP', trigger: 'blur' },
          {
            pattern:
              /^(((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/,
            message: '请输入正确的ip地址',
            trigger: 'blur'
          }
        ],
        collectDeviceCmdPort: [
          {
            required: true,
            message: '请输入宽带采集设备指令控制端口',
            trigger: 'blur'
          },
          {
            pattern:
              /^((\d)|([1-9]\d{1,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d{1})|(6553[0-5]))$/,
            message: '端口号范围为0~65535',
            trigger: 'blur'
          }
        ],
        collectDeviceDataPort: [
          {
            required: true,
            message: '请输入宽带采集设备数据端口',
            trigger: 'blur'
          },
          {
            pattern:
              /^((\d)|([1-9]\d{1,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d{1})|(6553[0-5]))$/,
            message: '端口号范围为0~65535',
            trigger: 'blur'
          }
        ]
      },

      dvbDeviceform: {
        dvbDeviceIP: ''
        // dvBDevicePort: ''
      },
      dvbDeviceRules: {
        dvbDeviceIP: [
          {
            required: true,
            message: '请输入DVB设备IP',
            trigger: 'blur'
          },
          {
            pattern:
              /^(((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/,
            message: '请输入正确的ip地址',
            trigger: 'blur'
          }
        ]
      },

      romoteForm: {
        collectDeskURL: ''
      },
      romoteRules: {
        collectDeskURL: [
          {
            required: true,
            message: '请输入宽带采集远程桌面URL',
            trigger: 'blur'
          }
        ]
      },

      serverIP: '192.168.1.40',
      username: "sun'hong",
      password: 'Aa123456'
    }
  },
  mounted () {
    this.netGet()
  },
  methods: {
    async netGet () {
      try {
        const { data } = await netGetAPI()
        // console.log('网络参数配置:', data)
        this.antennaForm.anteDeviceIP = data.anteDeviceIP
        this.antennaForm.anteDevicePort = data.anteDevicePort

        this.collectDeviceForm.collectDeviceIP = data.collectDeviceIP
        this.collectDeviceForm.collectDeviceCmdPort = data.collectDeviceCmdPort
        this.collectDeviceForm.collectDeviceDataPort =
          data.collectDeviceDataPort

        this.dvbDeviceform.dvbDeviceIP = data.dvbDeviceIP
        this.romoteForm.collectDeskURL = data.collectDeskURL
      } catch (error) {
        console.log(error)
      }
    },
    setting (form, type) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          try {
            await netConfigAPI({
              ...this[form],
              type
            })
            this.$message.success('配置成功！')
          } catch (error) {
            console.log(error)
            this.$message.error('操作失败！')
          }
        } else {
          return false
        }
      })
    },
    // 构建RDP文件 => 下载文件
    generateRdpFile () {
      // 构建RDP文件的内容
      const rdpContent = `
        screen mode id:i:2
        desktopwidth:i:1280
        desktopheight:i:720
        session bpp:i:32
        winposstr:s:0,1,0,0,800,600
        full address:s:${this.serverIP} // 替换为你的服务器IP
        username:s:${this.username}    // 可选用户名
        password 51:b:${this.password}
        auto connect:i:1
        `
      // 创建Blob对象并触发下载
      const blob = new Blob([rdpContent], { type: 'application/rdp' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = 'my-connection.rdp' // 下载文件名
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url) // 释放URL对象
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  padding: 10px 15px;
  height: calc(100vh - 50px);
  .card {
    min-height: 300px;
    border: 1px solid #000;
    background-color: #fff;
    margin-bottom: 10px;

    legend {
      text-align: left;
      margin-left: 15px;
    }

    .row {
      width: 100%;
      height: 90px;
      display: flex;
      align-items: center;
      position: relative;
      border-bottom: 1px dashed #ccc;

      /deep/ .el-form--inline .el-form-item {
        margin-right: 20px;
      }

      .fontTitle {
        font-weight: 700;
        color: #282c34;
        position: relative;
        bottom: 11%;
        margin: 0 20px;
      }

      .btn {
        cursor: pointer;
        width: 60px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        position: absolute;
        right: 20px;
        top: 25px;
        color: #fff;
        background-color: #3f9cfb;
        border-radius: 3px;
      }
    }
  }
}
</style>
